<template>
  <div>
    <!-- 头部 -->
    <div class="top">
      <el-input
        placeholder="请输入姓名或者学号"
        round
        v-model="input1"
      ></el-input>
      <el-button icon="el-icon-search" circle class="btn"></el-button>
    </div>
    <!-- <div class="btns">
      <el-button type="danger" round @click="deleteAll = true"
        >批量删除</el-button
      >
      <el-button type="primary" round @click="user_add = true"
        >添加学生</el-button
      >
    </div> -->
    <!-- 表格 -->
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="number" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="departments" label="姓名" width="110">
        </el-table-column>
        <el-table-column prop="professional" label="学号" width="160">
        </el-table-column>
        <el-table-column prop="course_name" label="手机号码" width="160">
        </el-table-column>
        <el-table-column prop="course_number" label="添加时间" width="160">
        </el-table-column>
        <el-table-column prop="course_attribute" label="所属学院" width="160">
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <!-- 编辑 -->
          <!-- <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="user_add = true"
            class="table_btn"
          ></el-button> -->
          <!-- 删除 -->
          <!-- <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteOne = true"
            class="table_btn"
          ></el-button> -->
          <el-button type="success" @click="look = true" class="table_btn"
            >详细信息</el-button
          >
        </el-table-column>
      </el-table>
    </div>
    <!-- 尾部 -->
    <div class="btn4">
      <el-button type="primary">首页</el-button>
      <el-button type="primary">上一页</el-button>
      <el-button type="primary">下一页</el-button>
      <el-button type="primary">尾页</el-button>
    </div>
    <!-- 批量删除按钮对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="deleteAll"
      width="30%"
      :before-close="handleClose"
    >
      <span>确定全部删除?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteAll = false">取 消</el-button>
        <el-button type="primary" @click="deleteAll = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加按钮对话框 -->
    <el-dialog
      title="添加学生"
      :visible.sync="user_add"
      width="40%"
      :before-close="handleClose"
    >
      <div>
        <div class="dialog">
          <el-form label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="userForm.username1"></el-input>
            </el-form-item>
            <el-form-item label="学号">
              <el-input v-model="userForm.username2"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userForm.username3"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="userForm.username4"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="userForm.username5"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userForm.username6"></el-input>
            </el-form-item>
            <el-form-item label="出生年月">
              <el-input v-model="userForm.username7"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userForm.username8"></el-input>
            </el-form-item>
            <el-form-item label="所属学院">
              <el-input v-model="userForm.username9"></el-input>
            </el-form-item>
            <el-form-item label="所属专业">
              <el-input v-model="userForm.username10"></el-input>
            </el-form-item>
            <el-form-item label="所属班级">
              <el-input v-model="userForm.username11"></el-input>
            </el-form-item>
            <el-form-item label="注册时间">
              <el-input v-model="userForm.username12"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="user_add = false">取 消</el-button>
          <el-button type="primary" @click="user_add = false">确 定</el-button>
        </span>
      </div>
    </el-dialog>
    <!-- 详细信息对话框 -->
    <el-dialog
      title="详细信息"
      :visible.sync="look"
      width="40%"
      :before-close="handleClose"
    >
      <div>
        <div class="dialog">
          <el-form label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="userForm.username1"></el-input>
            </el-form-item>
            <el-form-item label="学号">
              <el-input v-model="userForm.username2"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userForm.username3"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="userForm.username4"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="userForm.username5"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userForm.username6"></el-input>
            </el-form-item>
            <el-form-item label="出生年月">
              <el-input v-model="userForm.username7"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userForm.username8"></el-input>
            </el-form-item>
            <el-form-item label="所属学院">
              <el-input v-model="userForm.username9"></el-input>
            </el-form-item>
            <el-form-item label="所属专业">
              <el-input v-model="userForm.username10"></el-input>
            </el-form-item>
            <el-form-item label="所属班级">
              <el-input v-model="userForm.username11"></el-input>
            </el-form-item>
            <el-form-item label="注册时间">
              <el-input v-model="userForm.username12"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="look = false">取 消</el-button>
          <el-button type="primary" @click="add = false">确 定</el-button>
        </span> -->
      </div>
    </el-dialog>
    <!-- 删除按钮对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="deleteOne"
      width="30%"
      :before-close="handleClose"
    >
      <span>确定删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteOne = false">取 消</el-button>
        <el-button type="primary" @click="deleteOne = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        username1: "",
        username2: "",
        username3: "",
        username4: "",
        username5: "",
        username6: "",
        username7: "",
        username8: "",
        username9: "",
        username10: "",
        username11: "",
        username12: "",
      },
      deleteAll: false,
      user_add: false,
      addChapter: false,
      modifyProfessional: false,
      deleteOne: false,
      query: false,
      input1: "",
      input2: "",
      look: false,

      radio: "1",
      tableData: [
        {
          number: "1",
          departments: "小达",
          professional: "1740110223",
          course_name: "18888888888",
          course_number: "2020-10-12",
          course_attribute: "国际教育学院",
        },
        {
          number: "2",
          departments: "小达",
          professional: "1740110223",
          course_name: "18888888888",
          course_number: "2020-10-12",
          course_attribute: "国际教育学院",
        },
        {
          number: "3",
          departments: "小达",
          professional: "1740110223",
          course_name: "18888888888",
          course_number: "2020-10-12",
          course_attribute: "国际教育学院",
        },
        {
          number: "4",
          departments: "小达",
          professional: "1740110223",
          course_name: "18888888888",
          course_number: "2020-10-12",
          course_attribute: "国际教育学院",
        },
      ],
      multipleSelection: [],
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-form-item {
  padding-left: 120px;
}

.el-input {
  width: 250px;
  margin-left: 20px;
}

.el-select {
  margin-left: 20px;
}

.btn {
  margin-left: 20px;
}
.btns {
  margin-left: 20px;
}
.table {
  margin-top: 20px;
  margin-bottom: 50px;
}
.btn4 {
  display: flex;
  justify-content: center;
}
.dialog {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 30px;
}
.sp {
  width: 80px;
  margin-left: 30px;
}
.dialog-footer {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.table_btn {
  margin-right: 10px;
}
</style>